<template>
  <div v-loading="loading" element-loading-text="拼命加载中">
    <ul class="k-msg-list">
      <li class="k-msg-item" @click="open">
        <div class="k-msg-text">
          你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
        </div>
        <div class="k-time">
          2017/5/5
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
  import {
    pagination,
    search,
    personal
  } from 'fac/mixin.js';
  import {
    mapMutations
  } from 'vuex';
  export default {
    name: 'message',
    mixins: [pagination, search, personal],
    beforeRouteUpdate(to, from, next) {
      //当搜索字符串变化时,路由发生改变,重新请求数据
      console.log(to);
      console.log(this.search);
      // this.fetchData()
      next();
    },
    data() {
      return {
        loading: false
      }
    },
    methods: {
      //获取数据
      fetchData() {
        console.log('正在获取数据,页码为:', this.currentPage);
      },
      open() {
        const h = this.$createElement;
        this.$msgbox({
          title: '消息',
          message: h('p', null, [
            h('span', null, '内容可以是 '),
            h('i', {
              style: 'color: teal'
            }, 'VNode')
          ]),
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              instance.confirmButtonLoading = true;
              instance.confirmButtonText = '执行中...';
              setTimeout(() => {
                done();
                setTimeout(() => {
                  instance.confirmButtonLoading = false;
                }, 300);
              }, 3000);
            } else {
              done();
            }
          }
        }).then(action => {
          this.$message({
            type: 'info',
            message: 'action: ' + action
          });
        });
      }
    },
    watch: {
      currentPage(newVal, oldVal) {
        console.log('老值:', oldVal);
        console.log('新值:', newVal);
        this.fetchData();
      }
    },
    mounted() {
      this.isNotPersonalHomePage && this.renderPagination({
        total: 500,
        currentPage: 2
      });
    }
  }

</script>
